$(() => {
  // 业务2：下拉类别列表渲染
  const getCategoryList = () => {
    myAjax('GET', '/admin/category/list', {}, (res) => {
      const htmlStr = template('moban', res)
      $('#category').html(htmlStr)
    })
  }
  getCategoryList()

  // 业务3：渲染日期选择组件
  const renderDate = () => {
    // 日期组件：http://layui-doc.pearadmin.com/doc/modules/laydate.html
    layui.use('laydate', function () {
      var laydate = layui.laydate
      // 执行一个laydate实例
      laydate.render({
        elem: '#articleDate', // 指定元素，改成项目中的 id
      })
    })
  }
  renderDate()

  // 业务4：初始化富文本编辑器
  const renderRichText = () => {
    tinymce.init({
      selector: '#articleContent',
      // 本地化配置 - language（界面语言）
      language: 'zh_CN',
    })
  }
  renderRichText()

  // 发布文章状态标记：发布："已发布" ， 草稿：传空""
  let state = ''
  // 业务1：给表单绑定提交事件
  $('form').on('submit', (e) => {
    // 阻止默认行为，否则页面会刷新提交
    e.preventDefault()
    // FormData 可以基于 form 快速获取带 name 表单的值
    const fd = new FormData($('form').get(0))
    // 添加文章状态到 fd 参数中
    fd.append('state', state)
    // fd 打印测试需要用 forEach
    fd.forEach((value, key) => {
      console.log({ key, value })
    })
    // 发送 ajax 请求(通过FormData提交)
    myAjax('POST', '/admin/article/publish', fd, (res) => {
      if (res.code === 200) {
        // 情况1：成功提示
        layer.msg('发布成功', { icon: 1, time: 2000 }, () => {
          // 轻提示结束后跳转
          location.href = 'article_list.html'
        })
      } else {
        // 情况2：失败 - 轻提示(不会干扰用户操作的提示)
        layer.msg(res.msg, { icon: 3, time: 2000 })
      }
    })
  })

  // 发布按钮 - 先触发按钮自身的事件，再冒泡触发表单的提交事件
  $('.btn-add').on('click', () => {
    // 更新标记
    state = '已发布'
  })
})
